<template>
  <div>
    <router-link to="/">
      <main v-for="item in dataList">
        <img :src='item.src' />
        <p>{{ item.name }}</p>
        <span>{{ item.price }}</span>
      </main>
    </router-link>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: "nubia努比亚 z40 Pro", price: "￥3399.00" ,src:"https://image.ztemall.com/6a8987b791424a2be4a4c227f5af91bd.jpg"},
        { id: 2, name: "中兴Axon 30 5G 屏下摄像手机", price: "￥1998.00" ,src:"https://image.ztemall.com/e3776e1358bb9e560a267958f988ce34.jpg"},
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
div {
  margin-top: 1rem;
  
  a{
    width: 100%;
  display: flex;  
  justify-content: space-around;
  flex-wrap: wrap;
  
    main {
    width:45%;
    height: 3.5rem;
    background-color: white;
    border-radius: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.15rem;
    margin-bottom: 0.8rem;
    img {
      width: 2rem;
      height: 2rem;
    }
    p {
      margin-top: 0.25rem;
    }
    span {
      color: red;
      margin-top: 0.15rem;
    }
  }

  }
 
}
</style>
